{% extends "base.html" %}
{% load static %}
{% block title %}更新{% endblock %}
{% block css %}<link rel="stylesheet" href="{% static 'css/update.css' %}">{% endblock %}
{% block content %}

<div class="update-form">
    <div class="status">{{ status | default_if_none:"" }}</div>
    <h3>{{ user_data.name }}</h3>
    <form method="post" class="update-f">
        {% csrf_token %}
        <div class="update-info">
            <span class="update-key">主题</span>
            <input class="update-value" type="text" name="theme" value={{ user_data.theme }}> 
        </div>
        <div class="update-info">
            <span class="update-key">标题</span>
            <input class="update-value" type="text" name="title" value={{ user_data.title }}> 
        </div>
        <div class="update-info">
            <span class="update-key">季数</span>
            <input class="update-value" type="text" name="season" value={{ user_data.season | default_if_none:"" }}> 
        </div>
        <div class="update-info">
            <span class="update-key">副标题</span>
            <input class="update-value" type="text" name="subtitle" value={{ user_data.subtitle | default_if_none:"" }}> 
        </div>
        <div class="update-info">
            <span class="update-key">类型</span>
            <!-- <input class="update-value" type="text" name="type" value={{ user_data.type | default_if_none:"" }}>  -->
            <input class="update-value" type="text" id="playmode" name="playmode" list="playmodelist" placeholder="请选择类型" oninput="handlePlaymode(event)" value={{ user_data.playmode | default_if_none:"" }}>
            <datalist id="playmodelist">
                <option>TV</option>
                <option>电影</option>
                <option>剧场版</option>
                <option>番外篇</option>
                <option>特别篇</option>
                <option>OVA</option>
            </datalist>
        </div>

        <div class="update-info">
            <span class="update-key">维度</span>
            <!-- <input class="update-value" type="text" name="dim" value={{ user_data.dim | default_if_none:"" }}>  -->
            <input class="update-value" type="text" name="dim" list="dimlist" placeholder="请选择维度" value={{ user_data.dim | default_if_none:"" }}>
            <datalist id="dimlist">
                <option>二维</option>
                <option>三维</option>
                <option>三渲二</option>
            </datalist>
        </div>
        <div class="update-info">
            <span class="update-key">集数</span>
            <input class="update-value" type="number" id="episodes" name="episodes" oninput="handleEpisods(event)" 
            value={{ user_data.episodes | default_if_none:"" }}> 
        </div>
        <div class="update-info">
            <span class="update-key">时长</span>
            <input class="update-value" type="text" id="duration" placeholder="以min为单位" name="duration" value={{ user_data.duration | default_if_none:"" }}> 
        </div>
        <div class="update-info">
            <span class="update-key">首集</span>
            <input class="update-value" type="number" id="episode_start" name="episode_start" value={{ user_data.episode_start | default_if_none:"" }}> 
        </div>
        <div class="update-info">
            <span class="update-key">末集</span>
            <input class="update-value" type="number" id="episode_end" min="1" step="1" name="episode_end" value={{ user_data.episode_end | default_if_none:"" }}> 
        </div>
        <div class="update-info">
            <span class="update-key">开播日期</span>
            <input class="update-value" type="text" id="date_start" name="date_start" oninput="handleDateStart(event)" 
            value={{ user_data.date_start | default_if_none:"" | date:"Y-m-d" }}> 
        </div>
        <div class="update-info">
            <span class="update-key">完播日期</span>
            <input class="update-value" type="text" id="date_end" name="date_end" value={{ user_data.date_end | default_if_none:"" | date:"Y-m-d" }}> 
        </div>
        <div class="update-info">
            <span class="update-key">制作公司</span>
            <input class="update-value" type="text" name="producer" value='{{ user_data.producer | default_if_none:"" }}'> 
        </div>
        

        <input type="submit" value="提交">
</div>

<script>

// 监听动画类型，剧场版、电影自动取消集数、首集、末集
function handlePlaymode(event) {  
    const playmodeValue = event.target.value;
    if (playmodeValue=='剧场版' || playmodeValue=='电影') {
        document.getElementById('episodes').value = "";
        document.getElementById('episode_start').value = "";
        document.getElementById('episode_end').value = "";
    } else {
        document.getElementById('episodes').value = 12;
        document.getElementById('episode_start').value = 1;
        document.getElementById('episode_end').value = 12;
    }
}
    // 监听输入集数的变化，自动填充末集
function handleEpisods(event) {  
    // 获取 input episods元素的值  
    const episodsValue = event.target.value;
    document.getElementById('episode_end').value = episodsValue;
    // 在这里处理 input 值变化的逻辑  
    // console.log('集数变化为:', episodsValue);  
}
function handleDateStart(event) {
    // 获取 input datestart元素的值  
    const datestartValue = event.target.value;
    if(datestartValue.length==10) {
        var dateStart = new Date(datestartValue);
        // console.log(dateStart);
        var episodes = document.getElementById('episodes').value;
        var days = (episodes - 1) * 7;
        // console.log(days);
        var dateEnd = dateStart.setDate(dateStart.getDate() + days);
        dateEnd = new Date(dateEnd);
        // console.log(dateEnd);
        var year = dateEnd.getFullYear();
        var month = ('0' + (dateEnd.getMonth() + 1)).slice(-2);
        var day = ('0' + dateEnd.getDate()).slice(-2);
        var dateendValue = year + '-' + month + '-' + day; 
        // console.log(dateendValue);
        document.getElementById('date_end').value = dateendValue;
    }
}

</script>
    
{% endblock %}